<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Insert title here</title>
	<link rel="stylesheet" href="js/bootstrap-3.3.7-dist/css/bootstrap.min.css">

	<link rel="stylesheet" href="js/bootstarp-table-1.11.1/bootstrap-table.min.css">

	<script src="js/jquery-3.3.1.min.js"></script>

	<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
	<script src="js/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

	<script src="js/bootstarp-table-1.11.1/bootstrap-table.min.js"></script>

	<script src="js/bootstarp-table-1.11.1/bootstrap-table-zh-CN.min.js"></script>

</head>
<style type="text/css">
	#pic{
		border:1px solid #000000;
		width:200px;
		height:200px;
		margin: 0px auto 0px auto;
		align-content: center;
		text-align: center;
		float: left;
	}
	.container{
		width: 800px;
		margin: 30px auto;
	}

	.picture{
		width: 600px;
		height: 600px;
		margin-left: 150px;
		border:1px solid #000;
	}
	#img_span img{
		width: 100px;
		height: 100px;
		margin-right: 20px;
		margin-top: 20px;

	}
	#img_span img2{
		width: 100px;
		height: 100px;
		margin-right: 20px;
		margin-top: 20px;

	}
</style>

<body style="margin: 30px;">
<div class="container">
	<div class="form-group">
		<label for="inputEmail3" class="col-sm-2 control-label">
			品牌图片
		</label>
		<div class="picture">
			<form th:action="@{|/upload2|}" id="uploadForm2" method="post" enctype="multipart/form-data">
				<input id="file2" name="img" type="file"><br> <!--onchange="changepic(this)"  class="filepath" -->
			</form>
			<span id="img_span2">
        	</span>
		</div>
	</div>
	<div class="form-group">
		<label for="inputEmail3" class="col-sm-2 control-label">
			详情图片
		</label>
		<div class="picture">
			<form th:action="@{|/upload3|}" id="uploadForm1" method="post" enctype="multipart/form-data">
				<input id="file" name="img" type="file"><br> <!--onchange="changepic(this)"  class="filepath" -->
			</form>
			<span id="img_span">
			</span>
		</div>
	</div>
	<form th:action="@{|/upload4|}" id="uploadForm" method="post" enctype="multipart/form-data">
		<div class="form-group">
			<label for="inputEmail3" class="col-sm-2 control-label">
				首页展示图
			</label>
			<div class="col-sm-6" >
				<div id="pic">
					<!--<img th:src="${uploadImageKey}" width="180px" height="180px" />-->
				</div>
				<input type="file" id="fileName" name="img" >
			</div>
		</div>
	</form>
</div>
<div class="container">
	<form action="/addprojectjoin" method="post" class="form-horizontal" role="form" name="myfrom" id="myfrom">
		<input type="text" hidden="hidden" id="imgUrl" name="imgUrl">
		<input type="text" hidden="hidden" id="detailImg" name="detailImg">
		<input type="text" hidden="hidden" id="projectImg" name="projectImg">
		<div class="form-group">
			<label for="inputEmail3" class="col-sm-2 control-label">排序</label>
			<div class="col-sm-6">
				<input type="text" class="form-control" name="sort" id="sort" >
			</div>
		</div>
		<div class="form-group">
			<label for="inputEmail3" class="col-sm-2 control-label">品牌名称</label>
			<div class="col-sm-6">
				<input type="text" name="name" id="name" class="form-control">
			</div>
		</div>
		<div class="form-group">
			<label for="inputEmail3" class="col-sm-2 control-label">项目业态</label>
			<div class="col-sm-6">
				<input type="text" name="formart" id="formart" class="form-control">
			</div>
		</div>
		<div class="form-group">
			<label for="inputEmail3" class="col-sm-2 control-label">覆盖城市数量</label>
			<div class="col-sm-6">
				<input type="text" name="numberofcity" id="numberOfCity" class="form-control">
			</div>
		</div>
		<div class="form-group">
			<label for="inputEmail3" class="col-sm-2 control-label">开店数量</label>
			<div class="col-sm-6">
				<input type="text" name="numberofshop" id="numberOfShop" class="form-control">
			</div>
		</div>
		<div class="form-group">
			<label for="inputEmail3" class="col-sm-2 control-label">成立时间</label>
			<div class="col-sm-6">
				<input type="text" name="startTime" id="startTime" class="form-control">
			</div>
		</div>
		<div class="form-group">
			<label for="inputEmail3" class="col-sm-2 control-label">主营产品</label>
			<div class="col-sm-6">
				<input type="text" name="mainProduct" id="mainProduct" class="form-control">
			</div>
		</div>
		<div class="form-group">
			<label for="inputEmail3" class="col-sm-2 control-label">大标签</label>
			<div class="col-sm-6">
				<input type="text" name="ttag" id="ttag" class="form-control">
			</div>
		</div>
		<div class="form-group">
			<label for="inputEmail3" class="col-sm-2 control-label">小标签</label>
			<div class="col-sm-6">
				<input type="text" name="tag" id="tag" class="form-control">
			</div>
		</div>
		<div class="form-group">
			<label for="inputEmail3" class="col-sm-2 control-label">描述</label>
			<div class="col-sm-6">
				<input type="text" name="describe" id="describe" class="form-control">
			</div>
		</div>
		<div class="form-group">
			<label for="inputEmail3" class="col-sm-2 control-label">最低加盟费用</label>
			<div class="col-sm-6">
				<input type="text" name="money" id="money" class="form-control"><span>万元</span>
			</div>
		</div>

		<div class="form-group">
			<label for="inputEmail3" class="col-sm-2 control-label">总部所在城市</label>
			<div class="col-sm-6">
				<select class="form-control" name="cid" id="cid">
				</select>
			</div>
		</div>
		<div class="form-group">
			<label for="inputEmail3" class="col-sm-2 control-label">一级分类</label>
			<div class="col-sm-6">
				<select class="form-control" name="fid" id="fid">
				</select>
			</div>
		</div>
		<div class="form-group">
			<label for="inputEmail3" class="col-sm-2 control-label">二级分类</label>
			<div class="col-sm-6">
				<select class="form-control" name="sid" id="sid">
				</select>
			</div>
		</div>

		<div class="modal-footer">
			<button type="button" id="button1" class="btn btn-default1" data-dismiss="modal" onclick="goback()">取消</button>
			<!-- <input type="submit" class="btn btn-primary" id="sub1" value="提交" /> -->
			<button type="submit" class="btn btn-primary" id="sub1" data-dismiss="modal">提交</button>
		</div>
	</form>
</div>
</body>
<script>
    function getCookie(name){
        var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
        if(arr=document.cookie.match(reg))
            return unescape(arr[2]);
        else
            return null;
    }
    function setCookie(c_name,value,expiredays) {
        var exdate=new Date();
        exdate.setDate(exdate.getDate()+expiredays);
        document.cookie=c_name+"="+escape(value)+((expiredays==null)?"":";expires="+exdate.toGMTString());
    }

    $("#file").change(function(e) {
        $("#uploadForm1").submit();

    })
    $("#file2").change(function(e) {
        $("#uploadForm2").submit();

    })

    function del(a){
        console.log(a);
        document.getElementById(a).remove();
        console.log(getCookie("detailImg")+"==========================222");
        setCookie("detailImg",getCookie("detailImg").replace(","+a,""));
        setCookie("detailImg",getCookie("detailImg").replace(a+",",""));
        setCookie("detailImg",getCookie("detailImg").replace(a));
        console.log(getCookie("detailImg")+"=========================333");

    }
    function del2(a){
        console.log(a);
        document.getElementById(a).remove();
        console.log(getCookie("projectImg")+"==========================444");
        setCookie("projectImg",getCookie("projectImg").replace(","+a,""));
        setCookie("projectImg",getCookie("projectImg").replace(a+",",""));
        setCookie("projectImg",getCookie("projectImg").replace(a));
        console.log(getCookie("projectImg")+"=========================5555");

    }
</script>
<script>
    $(function() {
        $.ajax({
            type: "GET",
            url: "/findLists",
            async: "true",
            dataType: "json",
            success: function (map) {
                $type = document.getElementById("cid");
                $fid = document.getElementById("fid");
                $sid = document.getElementById("sid");
                var s = "";
                for (i = 0; i < map.data.list1.length; i++) {
                    s = s + "<option value=" + map.data.list1[i].id + ">" + map.data.list1[i].city + "</option>";
                }
                $type.innerHTML = s;
                var s1 = "";
                for (i = 0; i < map.data.list2.length; i++) {
                    s1 = s1 + "<option value=" + map.data.list2[i].id + ">" + map.data.list2[i].typeName + "</option>";
                }
                $fid.innerHTML = s1;
                var s2 = "";
                for (i = 0; i < map.data.list3.length; i++) {
                    s2 = s2 + "<option value=" + map.data.list3[i].id + ">" + map.data.list3[i].typeName + "</option>";
                }
                $sid.innerHTML = s2;


				//详情图片
				if(getCookie("str")!=null){//第一次进入添加页面值不存在
                    if(getCookie("detailImg")==null||getCookie("detailImg").match("undefined")){//存入第一张图片
                        console.log(getCookie("str"+"5555555555555"));
                        setCookie("detailImg",getCookie("str"));
                    }else{
                        if(!getCookie("detailImg").match(getCookie("str"))){//新增图片未拼接
                            setCookie("detailImg",getCookie("detailImg")+","+getCookie("str"))
                        }
                    }
				}
                console.log(getCookie("detailImg")+"==================================111");
                //详情图片展示
               var s3 = "";
                if(getCookie("detailImg")!=null){//图片存在
                    for(i=0;i<getCookie("detailImg").split(",").length;i++){
                        var str1 = "\""+getCookie("detailImg").split(",")[i]+"\"";
                        console.log(str1+"--------------");
						s3=s3+"<div style=\"float: left; padding: 5px,5px,5px,5px\" id="+str1+"><a href=\"javascript:void(0)\" onclick=del("+str1+")>删除</a><img src="+getCookie("detailImg").split(",")[i]+"  width=\"40px\"></div>";
                    }
                    document.getElementById("img_span").innerHTML=s3;
				}


                //品牌图片
				if(getCookie("str2")!=null){//第一次进入添加页面值不存在
                    if(getCookie("projectImg")==null||getCookie("projectImg").match("undefined")){
                        console.log(getCookie("str2"+"5555555555555"));
                        setCookie("projectImg",getCookie("str2"));
                    }else{
                        if(!getCookie("projectImg").match(getCookie("str2"))){
                            setCookie("projectImg",getCookie("projectImg")+","+getCookie("str2"))
                        }
                    }
				}
                console.log(getCookie("projectImg")+"==================================111");
				//品牌图片展示
                var s4 = "";
                if(getCookie("projectImg")!=null){
                    for(i=0;i<getCookie("projectImg").split(",").length;i++){
                        var str3 = "\""+getCookie("projectImg").split(",")[i]+"\"";
                        console.log(str3);
						s4=s4+"<div style=\"float: left; padding: 5px,5px,5px,5px\" id="+str3+"><a href=\"javascript:void(0)\" onclick=del2("+str3+")>删除</a><img src="+getCookie("projectImg").split(",")[i]+"  width=\"40px\"></div>";

                    }
                    document.getElementById("img_span2").innerHTML=s4;
                }

				//主图展示
				if(getCookie("imgUrl")!=null){//第一次进入添加页面值不存在
                      document.getElementById("pic").innerHTML="<img src="+getCookie("imgUrl")+" width=\"180px\" height=\"180px\" />";
				}

                document.getElementById("imgUrl").value=getCookie("imgUrl");
				document.getElementById("detailImg").value=getCookie("detailImg");
                document.getElementById("projectImg").value=getCookie("projectImg");
            }
        });
    });



    $("#fileName").change(function(e) {
        $("#uploadForm").submit();
    })
    function  goback() {
        console.log("====================");
        setCookie("str2","", -1);
        setCookie("str","", -1);
        setCookie("imgUrl","", -1);
        setCookie("projectImg","", -1);
        setCookie("detailImg","", -1);
        window.location.href="projectjoin";
    }
</script>
</html>

